<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <link rel="stylesheet" href="../lib/font_esewmwo1wz5/iconfont.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../sass/login.css">

    <!-- 
        登录业务逻辑:
            1. 表单验证
              1.1 非空验证
              1.2 密码强度验证

            2. 调用登录接口判断用户名密码是否正确
                2.1 用户名密码正确
                    2.1.1 保存用户信息到localStorage
                    2.1.2 跳转到主界面
                2.2 用户名密码出错
                    2.2.1 弹出提示信息
     -->
</head>

<body>
    <div class="container2">
        <div class="Top">
            <img src="../img/images/C-_Users_qianfeng_Desktop_gong_第二阶段_week8-项目_熊猫优选_img_02首页_02.jpg" alt="">
            <div class="middle">
                <span class="iconfont icon-fangdajing" id="s1"></span>
                <input type="text" name="usrname" placeholder="搜索商品，发现更多优惠">
                <span class="s2">搜索</span>
            </div>
            <div class="bottom">
                <ul>
                    <li> <span class="iconfont icon-24gf-mailboxEmpty"></span><br>
                        全程包邮</li>
                    <li> <span class="iconfont icon-qitianwuliyoutuihuanhuo"></span><br>七天退换</li>
                    <li> <span class="iconfont icon-baozhengyudingfangjianbaozheng"></span><br>品质保证</li>
                    <li class="return1"><a href="#">返回</a></li>
                </ul>
            </div>
        </div>
        <div class="middle2">
            <div class="active">首页
            </div>


        </div>
        <div class="container">

            <h2 style="text-align: center;padding-bottom: 10px;color:rgb(66, 66, 66)" class="">登录注册界面</h2>
            <div>
                <span>登录</span>
                <span>注册</span>
            </div>
            <form class="login-1">
                <input type="text" name="username1" placeholder="请输入用户名"><br>
                <p class="usernameMsg"></p>
                <input type="password" name="password1" placeholder="请输入密码"><br>
                <p class="pswMsg"></p>
                <input type="submit" value="登录">
            </form>
            <form class="login-2">
                <input type="text" name="username" placeholder="请输入用户名"><br>
                <input type="password" name="password" placeholder="请输入密码"><br>
                
                <input type="submit" value="注册">
            </form>
        </div>

    </div>

    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/util.js"></script>
    <script src="../js/login.js"></script>
    <script>
        // 登录功能
        $('.login-1').on('submit', async function (e) {
            e = e || window.event
            e.preventDefault()
            let data = await myPromise({
                method: 'post',
                url: 'http://api.yuguoxy.com/api/member/login',
                data: {
                    username: $('.login-1>input[name="username1"]').val(),
                    password: $('.login-1>input[name="password1"]').val()

                }
            })
            console.log(data);
            if (data.resultCode == 1) {
                let user = data.resultInfo
                console.log(user);
                alert('登陆成功')
                location.href = './index.html'
                localStorage.setItem('login-user', JSON.stringify(user))
            } else {
                alert('用户名密码出错')
            }
        })
    </script>
    
 
</body>

</html>